<link rel="stylesheet" href="<?php echo $this->basePath('js/plugins/jquery-multi-select/css/multi-select.css'); ?>">
<script src="<?php echo $this->basePath('js/plugins/jquery-multi-select/jquery.multi-select.js'); ?>"></script>
<script src="<?php echo $this->basePath('js/plugins/jquery-multi-select/jquery.quicksearch.js'); ?>"></script>

<style>
    .ms-container{
        width: 100%;
    }
</style>
<div class="box-body table-responsive no-padding">
    <table class="table" style="background-color: #fff;">
        <thead>
        <tr>
            <th>
                <?php echo $this->translate('选择商品序列号'); ?><br>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <p>
                    <?php echo $this->translate('商品名称'); ?>：<strong><?php echo $this->goodsInfo->getGoodsName(); ?></strong>
                    <br>
                    <?php echo $this->translate('应选数量'); ?>：<?php echo $this->serialNumberN; ?>&nbsp;&nbsp;<?php echo $this->translate('已选数量'); ?>：<span id="selectNum"><?php echo !empty($this->inputSerialNumberArray) ? count($this->inputSerialNumberArray) : '0'; ?></span>
                </p>

                <select multiple="multiple" class="my-select-class" id="my-select-<?php echo $this->goodsInfo->getGoodsId(); ?>" data-id="<?php echo $this->goodsInfo->getGoodsId(); ?>" name="sGoodsSerialNumber">
                    <?php if($this->goodsSerialNumberList) foreach ($this->goodsSerialNumberList as $numberValue) { ?>
                        <option value='<?php echo $numberValue->getSerialNumber(); ?>' <?php if (!empty($this->inputSerialNumberArray) && in_array($numberValue->getSerialNumber(), $this->inputSerialNumberArray)) echo 'selected'; ?>><?php echo $numberValue->getSerialNumber(); ?></option>
                    <?php } ?>
                </select>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="text-right">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><?php echo $this->translate('关闭'); ?></button>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<script>
    $('.my-select-class').multiSelect({
        selectableHeader: "<div class='custom-header'><?php echo $this->translate('商品序列号'); ?></div><input type='text' class='search-input' autocomplete='off' placeholder='<?php echo $this->translate('快速检索'); ?>'>",
        selectionHeader: "<div class='custom-header'><?php echo $this->translate('发货序列号'); ?></div><input type='text' class='search-input' autocomplete='off' placeholder='<?php echo $this->translate('快速检索'); ?>'>",
        afterInit: function(ms){
            let that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function(e){
                    if (e.which === 40){
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function(e){
                    if (e.which == 40){
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();

            $('#selectNum').html(this.qs2.matchedResultsCount);
            $('#goodsSerialNumberStr'+this.options.id).text($('#my-select-'+this.options.id).val());
            $('#inputSerialNumberStr'+this.options.id).val($('#my-select-'+this.options.id).val());

            if (this.qs2.matchedResultsCount == <?php echo $this->serialNumberN; ?>) {
                erpMessage('<?php echo $this->translate('该商品序列号选择完毕'); ?>');
                hiddenSelectGoodsSerialNumber();
            }
        },
        afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();

            $('#selectNum').html(this.qs2.matchedResultsCount);
            $('#goodsSerialNumberStr'+this.options.id).text($('#my-select-'+this.options.id).val());
            $('#inputSerialNumberStr'+this.options.id).val($('#my-select-'+this.options.id).val());
        }
    });
</script>